<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工管理</title>
		<link rel="stylesheet" href="${cxt }/css/iconfont.css" />
		<link rel="stylesheet" href="${cxt }/css/llp_basepage.css" />
		<link rel="stylesheet" href="${cxt }/css/llp_tan.css" />
		<script type="text/javascript" src="${cxt }/js/iconfont.js" ></script>
		<script type="text/javascript" src="${cxt }/js/jquery-3.2.1.js" ></script>
</head>
<script type="text/javascript">
$().ready(function() {
	//修改和添加信息
	$(".addbtn").click(function() {
		$(".ycdiv").css("display","block");
	});
	
	//弹出可以更改信息的框
	var width = $(window).width();
	var height = $(window).height();
	$(".ycdiv").css({
		"width":width,
		"height":height
	});
	$(".xgdiv").css({
		"width":width,
		"height":height
	});
	//弹框的按钮点击事件
	$(".tan").click(function(){
		$(".ycdiv").css("display","none");
	});
	
	//给修改按钮来写点击时间
	 $(".update").click(function(){
		var id=$(this).parents("tr").find("td:eq(3)").text();
		$.ajax({
			type:"post",
			url:"${cxt}/backstage/xgempajax",
			data:{xgsfz:id},
			dataType:"json",
			success:function(data){
				//var data = eval('(' + data + ')'); 
				$("input[name=xgygxm]").val(data.empname);
				$("input[name=xgxb]").val(data.empsex);
				$("input[name=xgsfz]").val(data.empidcard);
				$("input[name=xgjs]").val(data.emprole);
				$("input[name=xgdh]").val(data.emptel);
				$("input[name=xgzt]").val(data.empstatus);
				$("input[name=xglrr]").val(data.empinput);
				$("input[name=xgszmd]").val(data.empstore);
		
			}
		});
		$(".xgdiv").css("display","block");
	});
	 
	//给查询按钮写点击事件
	$("#selbtn").click(function() {
		var inputs = $("#seltext").val();
		$.ajax({
			type:"post",
			url:"${cxt}/backstage/selempajax",
			data:{seltext:inputs},
			dataType:"json",
			success:function(data){
				console.log(data);
				$("#con").empty();
				for(var i=0;i<data.length;i++){
				$("#con").append(
						'<tr>'+
						'<td>'+data[i].empid+'</td>'+
						'<td>'+data[i].empname+'</td>'+
						'<td>'+data[i].empsex+'</td>'+
						'<td>'+data[i].empidcard+'</td>'+
						'<td>'+data[i].emprole+'</td>'+
						'<td>'+data[i].emptel+'</td>'+
						'<td>'+data[i].empstore+'</td>'+
						'<td>'+data[i].empinput+'</td>'+
						'<td>'+data[i].empstatus+'</td>'+
						'<td>'+
							'<input class="update" type="button" value="修 改" />'+
						'</td>'+
					'</tr>');
			}
			}
		});
	
	});
});

</script>
<body>
<div class="contentdiv">
	<div class="top">
		<i class="iconfont icon-jibenshezhi"></i>
		<span> 员工管理</span>
	</div>
	<div class="center">
		<div class="centertop">
			<div>
				<input id="seltext"  type="text" value="" placeholder="请输入姓名、门店或者编号进行查询" />
			</div>
			<div>
				<input class="addbtn" type="button" value="+添加" />
			</div>
			<div>
				<input id="selbtn" type="button" value="查询" />
			</div>
		</div>

		<div class="centerbutt">
			<table border="0" cellpadding="0" cellspacing="0">
				<tr>
					<th>员工编号</th>
					<th>员工姓名</th>
					<th>性别</th>
					<th>身份证编号</th>
					<th>角色</th>
					<th>电话</th>
					<th>所在门店</th>
					<th>录入人</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
				<tbody id="con">
				<c:forEach items="${emplst }" var="emp">
				<tr>
					<td>${emp.empid }</td>
					<td>${emp.empname }</td>
					<td>${emp.empsex }</td>
					<td>${emp.empidcard }</td>
					<td>${emp.emprole }</td>
					<td>${emp.emptel }</td>
					<td>${emp.empstore }</td>
					<td>${emp.empinput }</td>
					<td>${emp.empstatus }</td>
					<td>
						<input class="update" type="button" value="修 改" />
					</td>
				</tr>
				</c:forEach>
				</tbody>
			</table>
		</div>
	</div>

</div>

<div class="ycdiv">
			<div class="ycinner">
			    <p>添加信息</p>	
				<div class="yccontent">
				<form action="addemp" method="post">
				员工姓名:<input name="ygxm"/><br />
				性       别:<select class="xb" name="xb">
						<option value="男">男</option>
						<option value="女">女</option>
						</select>
						<br/>
				身 份 证:<input name="sfz"/><br />
				角      色:<select class="js" name="js">
						<option value="超级管理员">超级管理员</option>
						<option value="店长">店长</option>
						<option value="店员">店员</option>
						</select>
						<br/>
				电      话:<input name="dh"/><br />
				状      态:<select class="zt" name="zt">
						<option value="在职">在职</option>
						<option value="离职">离职</option>
						</select>
						<br/>
				录 入 人 :<input name="lrr"/><br />
				所在门店:<input name="szmd"/><br />
				<input class="tan" type="submit" value="确定"/>
				</form>
				</div>

			</div>
		</div>
		
		
<div class="xgdiv">
			<div class="xgycinner">
			    <p>修改信息</p>	
				<div class="xgyccontent">
				<form action="xgempsucceed" method="post">
				员工姓名:<input name="xgygxm" class="xgygxm"/><br />
				性       别:<select class="xgxb" name="xgxb">
						<option value="男">男</option>
						<option value="女">女</option>
						</select>
						<br/>
				身 份 证:<input name="xgsfz"/><br />
				角      色:<select class="xgjs" name="xgjs">
						<option value="超级管理员">超级管理员</option>
						<option value="店长">店长</option>
						<option value="店员">店员</option>
						</select>
						<br/>
				电      话:<input name="xgdh"/><br />
				状      态:<select class="xgzt" name="xgzt">
						<option value="在职">在职</option>
						<option value="离职">离职</option>
						</select>
						<br/>
				录 入 人 :<input name="xglrr"/><br />
				所在门店:<input name="xgszmd"/><br />
				<input class="tan" type="submit" value="确定"/>
				</form>
				</div>
			</div>
		</div>		
</body>
</html>